<template>
	<view>
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333333',
				background:'#dbffe8'
			}">
				<view class="action"></view>
				<view class="content text-bold" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					设备
				</view>
			</view>
		</view>
		<view class="bg"></view>
		<wanl-scroll-list ref="list" :option="option" @load="load($event,'load')" @refresh="load($event,'refresh')">
			<block v-if="list.length > 0">
				<view class="listConter"  v-for="(item,index) in list" :key="index" @click="jump('/pages/common/device/index?id=' + item.id)">
					<view class="listItem">
						<image :src="$wanlshop.oss(item.image)" class="itemImg" mode="aspectFill"></image>.
						<view class="itemRight">
							<view class="itemRightTilte">{{item.name}}</view>
							<view class="itemRightText">{{item.descr}}</view>
							<view class="itemRightMoney">￥{{item.price}}</view>
						</view>
					</view>
				</view>
			</block>
		</wanl-scroll-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				option: {
					page: 1,
					auto: true,
					safeArea: true,
					emptyText:'没有找到设备列表'
				},
			}
		},
		methods: {
			// 加载数据
			load(paging,key) {
				uni.request({
					url: '/wisdom/device_product/lists',
					data: {
						page: paging.page
					},
					success: res => {
						// console.log("czxczcz", res)
						let list = res.data.data;
						if(key == 'load') {
							this.list = [...this.list, ...list];
							this.$refs.list.loadSuccess({ list: this.list, total: res.data.total });
						} else if(key == 'refresh') {
							this.list = list;
							this.$refs.list.refreshSuccess({ list: this.list, total: res.data.total });
						}
					}
				});
			},
			jump(url) {
				this.$wanlshop.auth(url)
				// uni.navigateTo({
				// 	url: url
				// })
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		height: 578rpx;
		background: linear-gradient(167deg, #DBFFE8 43%, rgba(255, 255, 255, 0) 100%);
		position: absolute;
		top: 0;
		left: 0;
	}

	.listConter {
		padding:0 30rpx 20rpx 30rpx;
		position: sticky;
		z-index: 1;

	}

	.listItem {
		width: 100%;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		.itemImg {
			width: 145rpx;
			height: 145rpx;
			border-radius: 10rpx;
		}

		.itemRight {
			// width: 470rpx;
			flex: 1;
			height: 145rpx;
			margin-left: 20rpx;

			.itemRightTilte {
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.itemRightText {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-top: 6rpx;
			}

			.itemRightMoney {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #E31F1F;
				margin-top: 8rpx;
			}
		}
	}
</style>